<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="handleBack">
				<img src="../../../assets/images/left.png" />
			</div>
			<p>我的私信</p>
		</div>
		<div class="private-content">
			<ul class="follow-list" v-if="isPrivat">
				<li v-for="(item,index) in list" 
					:class="[{swipeleft: isSwipe[index]},'tab_manage_list left']" 
					@touchstart.stop="deleteData" 
					ref="child" 
					:key="index"				
				>
					<div class="box">
						<div class="con-box">
							<div class="follow-img" @click="handleMask(item.user_id,item.user_nickname)">
								<b v-if="item.read!=0"></b>
								<img :src="item.user_himg ? item.imgs : defalut" />
							</div>
							<div class="follow-information"  @click="handleDetali(item.messages_id,index)">
								<div class="information-left">
									<p class="name">{{item.user_nickname}}</p>
									<p class="autograph">{{item.messages_title}}</p>
								</div>
								<div class="information-right">
									<p class="name">{{item.times}}</p>
								</div>
							</div>
						</div>
					</div>
					<div class="delete" ref='remove' @click="removeTodo(item.messages_id,index)">删除</div>
				</li>
			</ul>
			<div class="list-img-pic" v-else>
				<nocontent></nocontent>
			</div>
			<!--遮罩-->
			<div class="mask" v-if="isMask">
				<div class="mask-opaciy"></div>
				<div class="mask-information">
					<img :src="infoList.user_himg ? imgs : defalut" class="head-portrait"/>
					<img src="../../../assets/images/home/del.png" class="Close" @click="onClose"/>
					<h3>{{infoList.user_nickname}}</h3>
					<p>{{infoList.user_desc}}</p>
					<div class="info-follow">
						<div @click="handleFollow">
							<img src="../../../assets/images/home/follow.png"/>
							<span>{{value}}</span>
						</div>
						<img src="../../../assets/images/hx.png"/>
						<div @click="handleLetter">
							<img src="../../../assets/images/home/letter.png"/>
							<span>发私信</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	
	import axios from "axios";
	import user from '../../../utils/isLogin';
	import defalut from '../../../assets/default.jpg';
	import Nocontent from '@/components/home/no-content';
	import qs from 'qs';
	export default {
		data() {
			return {
				list: [],
				infoList: [],
				follId: 0,
				name: '',
				imgs: '',
				isMask: false,
				defalut: defalut,
				value:'关注',
				isSwipe: [false, false, false],  
				isClick:true,
				isPrivat:true
			}
		},
		filters: {
			url: function(value) {
				if(!value) return ''
				value = user.src + value
				return value
			}
		},
		components:{
			Nocontent
		},
		created() {

			let plusReady = () => {

			}
			if(window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", plusReady, false);
			}

			var userId = JSON.parse(window.localStorage.getItem('userInfo')).userId;

			axios.post(user.src + '/index/my/My_direct_messages', {
				userid: userId,
			})
			.then(res => {
				if(res.data.status == 1054){
					this.isPrivat = false;
				}
				if(res.data.status == 200) {
					this.list = res.data.data;
					
					this.list.map((ele,index)=>{
						ele.imgs = ele.user_himg;
						var date2 = new Date();  
						var date1=new Date(ele.messages_time);
						var num=24*60*60*1000 ; //一天的毫秒数
						var cha=date2.getTime()-date1.getTime(); //两个时间的毫秒差

						if(cha>0){
							if(cha > num){
								ele.times = ele.messages_time.slice(11,16);
							}else if(date1.getDate()!=date2.getDate()){
								ele.times = ele.messages_time.slice(11,16);
							}else {
								ele.times = ele.messages_time.slice(5,10);
							}	
							if(cha<0){
								return
							}else{
								ele.times = ele.messages_time.slice(5,10);
							}
						}	
					})	
					this.isPrivat = true;
				}
			})
			.catch(error=> {

			});
		},
		methods: {
			//退出并关闭页面
			handleBack() {
				var privates = plus.webview.currentWebview();
				plus.webview.close(privates);
			},
			//左滑删除
			deleteData(){
				this.$refs.child.forEach((element, index) => {
					let x, y, X, Y, swipeX, swipeY;
					element.addEventListener('touchstart',function(e){
						x = e.changedTouches[0].pageX;
						y = e.changedTouches[0].pageY;
						swipeX = true;
						swipeY = true;
						this.isSwipe = [false, false, false];
					})
					element.addEventListener('touchmove', e => {
						X = event.changedTouches[0].pageX;
						Y = event.changedTouches[0].pageY;
						if (swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0) {
							e.stopPropagation();
							if (X - x > 10) { 
								e.preventDefault();
								this.isSwipe.splice(index, 1, false);
							}
							if (x - X > 10) {
								e.preventDefault();
								this.isSwipe.splice(index, 1, true);
							}
							swipeY = false;
						}
						if (swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
							swipeX = false;
						}
					})
				})
			},
			handleDetali(id,index){
				if(this.isClick){
					this.isClick = false;
					var privateDetails = plus.webview.create('privateDetails.html','privateDetails',{scrollIndicator:'none'},{
						articleId:id
					});
					privateDetails.addEventListener("loaded", ()=>{
					    privateDetails.show('pop-in', 300);
					    plus.webview.getWebviewById('privates').reload();
					    this.isClick = true;
					    privateDetails = null;
					}, false);
				}
			},
			//弹窗
			handleMask(id,name) {
				this.isMask = true;
				this.follId = id;
				this.name = name;
				var userId = JSON.parse(window.localStorage.getItem('userInfo')).userId;
				axios.post(user.src+ '/index/user/is_focus' , {
					articleUserid: id,
					userId: userId
				})
				.then(res=> {
					if(res.data.status == 200){
						this.infoList = res.data.data;
						this.imgs = res.data.data.user_himg;
						if(res.data.data.focus == 1){
							this.value = '已关注';
						}else{
							this.value = '关注';
						}
					}
				})
				.catch(error=> {
				   
				});
			},
			//关闭弹窗
			onClose() {
				this.isMask = false;
			},
			//关注
			handleFollow() {
				var userId = JSON.parse(window.localStorage.getItem('userInfo')).userId;
				var data = qs.stringify({
					userid: userId,
					article_userId: this.follId
				})
				axios({
					method: 'post',
					url: user.src + '/index/collect/focus',
					data: data
				})
				.then(res => {
					if(res.data.status == 200) {
						this.value = '已关注';

					} else if(res.data.status == 1030) {
						this.value = '关注'
					}
				})
				.catch(err => {
					console.log(err)
				})
			},
			//发私信
			handleLetter() {
				let id = this.follId;
				let name = this.name;
				if(this.isClick){
					this.isClick = false;
					var send = plus.webview.create('send.html', 'send', {}, {
						recipientId: id,
						name: name
					});
					send.addEventListener("loaded", ()=> {
						send.show('pop-in', 300);
						this.isMask = false;
						this.isClick = true;
						send = null;
					}, false);
				}
			},
			//删除私信
			removeTodo(id,index) { 
            this.isSwipe = [false, false, false]
				var userId = JSON.parse(window.localStorage.getItem('userInfo')).userId;
				axios.post(user.src+ '/index/my/Delete_the_messages' , {
					messagesId: id,
					userId:userId
				})
				.then(res=> {

					if(res.data.status == 200){
						this.list.splice(index, 1); 
						plus.nativeUI.toast('删除成功')
					}else{
						plus.nativeUI.toast('删除失败')
					}
				})
				.catch(error=> {
				   
				});
        },
		}
	}
</script>

<style lang='less' scoped>
	html,
	body {
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
		background: #f6f6f6;
	}
	* {
		margin: 0;
		padding: 0;
	}
	ul,
	li {
		list-style: none;
	}
	.publish-top {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 60px;
		background: @default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;
		display: flex;
		.left-icon {
			width: 90px;
			img {
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p {
			width: 80%;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
		span {
			display: block;
			width: 170px;
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.private-content {
		padding-top: 130px;
		width: 100%;
		.follow-list {
			width: 100%;
			overflow: hidden;
			li {
				position: relative;	
				-webkit-transform: translateX(0px);
				.box {
					-webkit-transition:all 0.3s linear;
					transition:all 0.3s linear;
					.con-box{
						display: flex;
						padding: 34px 0 20px 0;
						border-bottom: 1px solid #eeeeee;
						.follow-img {
							position: relative;
							margin: 0 24px 0 28px;
							width: 90px;
							height: 90px;
							border-radius: 50%;
							b{
								position: absolute;
								left:0px;
								top: 0px;
								background: red;
								width: 16px;
								height: 16px;
								border-radius: 50%;
							}
							img {
								display: block;
								width: 90px;
								height: 90px;
								border-radius: 50%;
							}
						}
						.follow-information {
							display: flex;
							justify-content: space-between;
							width: 520px;
							.information-left {
								padding-top: 14px ;
								.name {
									margin-bottom: 16px;
									line-height: 26px;
									font-size: 26px;
									font-weight: bold;
									color: #333;
								}
								.autograph {
									line-height: 22px;
									font-size: 22px;
									color: #666;
								}
							}
							.information-right {
								padding-top: 14px;
								font-size: 22px;
								color: #a3a3a3;
							}
						}
					}
				}
			}
			.delete {
				position: absolute;
			    top: 0;
			    right: -120px;
				width:120px;
				height: 150px;
				line-height: 150px;
				font-size: 26px;
				color: #fff;
				text-align: center;
				background: #ff3a32;
				z-index: 99;
			}
			.swipeleft{
				transform:translateX(-15%);
				-webkit-transform:translateX(-15%);
			}
		}
		.mask {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
			.mask-opaciy {
				width: 100%;
				height: 100%;
				background: #000000;
				opacity: .5;
			}
			.mask-information {
				position: absolute;
				top: 30%;
				left: 60px;
				width: 598px;
				height: 467px;
				border: 1px solid #d4ccca;
				background: #FFFFFF;
				border-radius: 10px;
				.head-portrait {
					position: absolute;
					left: 212px;
					top: -70px;
					width: 160px;
					height: 160px;
					border: 2px solid #FFFFFF;
					border-radius: 50%;
				}
				.Close {
					position: absolute;
					right: 0;
					top: -80px;
					width: 76px;
					height: 76px;
				}
				h3 {
					margin-top: 123px;
					text-align: center;
					font-size: 38px;
				}
				p {
					height: 147px;
					margin-top: 10px;
					padding: 0 80px;
					font-size: 26px;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}
				.info-follow {
					height: 128px;
					border-top: 1px solid #cecece;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-left: 90px;
					padding-right: 75px;
					div {
						display: flex;
						align-items: center;
						img {
							width: 48px;
							height: 46px;
							margin-right: 10px;
						}
						span {
							font-size: 28px;
						}
					}
					img {
						width: 1px;
						height: 43px;
					}
				}
			}
		}
	}
	.list-img-pic{
		height: 800px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>